<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-title">就近加油</view>

		<!-- 搜索区域 -->
		<view class="search-section">
			<view class="search-container">
				<image class="search-icon" src="/static/addOil/搜索.png"></image>
				<input class="search-input" placeholder="输入需要搜索的内容" placeholder-class="placeholder" />
				<view class="map-mode" @click="toggleMode">
					<view class="map-icon-wrapper">
						<image class="map-icon" src="/static/addOil/组 5.png"></image>
						<text class="map-text">{{ isMapMode ? '列表\n模式' : '地图\n模式' }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 油号标签 - 只在列表模式下显示 -->
		<scroll-view class="oil-tags" scroll-x="true" v-if="!isMapMode">
			<view v-for="(tag, index) in oilTags" :key="index" class="oil-tag" :class="{ active: activeTag === tag }"
				@click="selectTag(tag)">
				{{ tag }}
			</view>
		</scroll-view>

		<!-- 列表模式内容 -->
		<view class="gas-station-list" v-if="!isMapMode">
			<view v-for="(station, index) in gasStations" :key="index" class="gas-station-card"
				@click="onStationClick(station)">
				<!-- 加油站标题 -->
				<view class="station-title">{{ station.name }}</view>

				<!-- 优惠内容 -->
				<view class="discounts">
					<view v-for="(discount, dIndex) in station.discounts" :key="dIndex" class="discount-tag">
						{{ discount }}
					</view>
				</view>

				<!-- 图像与右侧信息区域 -->
				<view class="station-content">
					<image class="station-icon" src="/static/addOil/加油站.png"></image>

					<view class="station-details">
						<view class="business-hours">{{ station.businessHours }}</view>
						<view class="price">{{ station.price }}</view>
						<view class="station-address">
							<text class="address-text">{{ station.address }}</text>
							<image class="address-icon" src="/static/order/plane.png"></image>
						</view>
					</view>
				</view>

				<!-- 分隔线 -->
				<view class="divider" v-if="index < gasStations.length - 1"></view>
			</view>
		</view>

		<!-- 地图模式内容 -->
		<view class="map-mode-container" v-if="isMapMode">
			<map class="map" :latitude="mapData.latitude" :longitude="mapData.longitude" :markers="mapData.markers"
				:scale="mapData.scale" :show-location="true" @markertap="onMarkerTap">
			</map>
		</view>

		<!-- 底部弹窗 - 加油站详情（仅在地图模式点击标记时显示） -->
		<view class="popup-container" v-if="showDetailPopup" @click="closePopup">
			<view class="popup-content" @click.stop>
				<!-- 弹窗内容保持不变 -->
				<view class="popup-header">
					<text class="popup-title">{{ selectedStation.name }}</text>
					<image class="popup-close" src="/static/addOil/关闭.png" @click="closePopup"></image>
				</view>
				<view class="popup-address">
					<text>{{ selectedStation.address }}</text>
				</view>
				<view class="popup-discounts">
					<view v-for="(discount, dIndex) in selectedStation.discounts" :key="dIndex"
						class="popup-discount-tag">
						{{ discount }}
					</view>
				</view>
				<view class="popup-price">{{ selectedStation.price }}</view>
				<view class="popup-hours">{{ selectedStation.businessHours }}</view>
				<view class="popup-action-buttons">
					<view class="popup-nav-button" @click="navigateToStation">立即导航</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isMapMode: false,
				activeTag: '92#',
				oilTags: ['90#', '92#', '93#', '95#', '97#', '98#'],
				selectedStation: null,
				showDetailPopup: false,
				gasStations: [{
						id: 1,
						name: '中国石油加油站',
						discounts: ['满200减20', '满500减60'],
						businessHours: '营业时间：周一至周五 8:00-20:00',
						price: '￥5.66/升',
						address: '高新区人民路与解放路交叉口',
						latitude: 34.826622,
						longitude: 113.556722,
						iconPath: '/static/index/定位2.png'
					},
					{
						id: 2,
						name: '中国石化加油站',
						discounts: ['满300减30', '周六日优惠'],
						businessHours: '营业时间：全天24小时',
						price: '￥5.72/升',
						address: '山阳区人民路与解放路交叉口',
						latitude: 34.824521,
						longitude: 113.557732,
						iconPath: '/static/index/定位2.png'
					},
					{
						id: 3,
						name: '壳牌加油站',
						discounts: ['新用户立减50', '加油送洗车'],
						businessHours: '营业时间：全天24小时',
						price: '￥5.88/升',
						address: '解放区民主路与丰收路交叉口向东100米',
						latitude: 34.827521,
						longitude: 113.560732,
						iconPath: '/static/index/定位2.png'
					},
					// 新增随机门店信息
					{
						id: 4,
						name: '道达尔加油站',
						discounts: ['会员日9折', '满400送小礼品'],
						businessHours: '营业时间：6:00-23:00',
						price: '￥5.78/升',
						address: '示范区世纪大道与中原路交叉口向南200米',
						latitude: 34.823521,
						longitude: 113.563732,
						iconPath: '/static/index/定位2.png'
					}
				],
				mapData: {
					latitude: 34.826128,
					longitude: 113.558902,
					scale: 14,
					markers: [{
							id: 0,
							latitude: 34.826128,
							longitude: 113.558902,
							width: 25,
							height: 25,
							iconPath: '/static/addOil/椭圆 3 拷贝 2.png',
							callout: {
							                content: "附近门店>",
							                color: "#fff",
							                bgColor: "#FF9B2D", // 使用橙色背景
							                borderRadius: 15,
							                padding: 5,
							                display: "ALWAYS",
							                textAlign: "center",
							                borderWidth: 0,
							                borderColor: "#FF9B2D",
							                offset: {
							                  x: 0,
							                  y: -40
							                }
							              }
						}
						// 加油站标记将在created钩子中动态生成
					]
				}
			};
		},
		created() {
			// 动态生成加油站标记，确保与加油站数据一一对应
			this.gasStations.forEach(station => {
				this.mapData.markers.push({
					id: station.id,
					latitude: station.latitude,
					longitude: station.longitude,
					width: 25,
					height: 25,
					iconPath: station.iconPath,
					title: station.name
				});
			});
		},
		methods: {
			selectTag(tag) {
				this.activeTag = tag;
				// 实际项目中这里应该根据选择的油号过滤加油站
			},
			toggleMode() {
				this.isMapMode = !this.isMapMode;
				// 切换模式时清空选中的加油站和弹窗
				this.selectedStation = null;
				this.showDetailPopup = false;
			},
			onMarkerTap(e) {
				console.log('marker tap event', e);

				// 关键修复：不同平台可能将markerId放在不同位置
				const markerId = e.detail?.markerId || e.markerId;
				console.log('markerId', markerId);

				// 忽略用户位置标记（id=0）
				if (markerId === 0) return;

				// 查找对应的加油站信息并显示弹窗
				this.selectedStation = this.gasStations.find(station => station.id === markerId);
				console.log('selectedStation', this.selectedStation);

				if (this.selectedStation) {
					this.showDetailPopup = true;
					console.log('showDetailPopup set to', this.showDetailPopup);
				} else {
					console.error('未找到对应的加油站信息，ID:', markerId);
				}
			},
			onStationClick(station) {
				// 列表模式点击只切换到地图模式，不直接显示弹窗
				this.isMapMode = true;
				// 可以定位到该加油站，但不显示弹窗
				this.mapData.latitude = station.latitude;
				this.mapData.longitude = station.longitude;
			},
			closePopup() {
				this.showDetailPopup = false;
				this.selectedStation = null;
			},
			navigateToStation() {
				if (!this.selectedStation) return;

				// 使用uni-app的API打开地图导航
				uni.openLocation({
					latitude: this.selectedStation.latitude,
					longitude: this.selectedStation.longitude,
					name: this.selectedStation.name,
					address: this.selectedStation.address,
					success: () => {
						console.log('打开地图成功');
					}
				});
			}
		}
	};
</script>

<style>
	.container {
		padding: 0;
		font-size: 14px;
		line-height: 24px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.page-title {
		padding: 15px;
		background-color: #fff;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		border-bottom: 1px solid #eee;
	}

	.search-section {
		padding: 15px;
		background: #fff;
	}

	.search-container {
		display: flex;
		align-items: center;
		background: #f5f5f5;
		border-radius: 20px;
		padding: 8px 15px;
	}

	.search-icon {
		width: 16px;
		height: 16px;
		margin-right: 10px;
	}

	.search-input {
		flex: 1;
		font-size: 14px;
	}

	.placeholder {
		color: #999;
	}

	.map-mode {
		display: flex;
		align-items: center;
		margin-left: 10px;
	}

	/* 地图模式：文字放入图像中，上下排布 */
	.map-icon-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
	}

	.map-icon {
		width: 100%;
		height: 100%;
	}

	.map-text {
		position: absolute;
		color: #fff;
		font-size: 12px;
		text-align: center;
		line-height: 1.2;
		white-space: pre-line;
	}

	.oil-tags {
		white-space: nowrap;
		padding: 15px;
		background: #fff;
		border-bottom: 1px solid #eee;
	}

	.oil-tag {
		display: inline-block;
		padding: 8px 15px;
		margin-right: 10px;
		border-radius: 15px;
		background: #f5f5f5;
		color: #666;
		font-size: 14px;
	}

	.oil-tag.active {
		background: #007aff;
		color: #fff;
	}

	.gas-station-list {
		padding: 15px;
		background: #f5f5f5;
	}

	/* 卡片样式 */
	.gas-station-card {
		background: #fff;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 15px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	/* 加油站标题 */
	.station-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.discounts {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 15px;
	}

	.discount-tag {
		background: #fff2f2;
		color: #ff3b30;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 12px;
		margin-right: 8px;
		margin-bottom: 5px;
	}

	/* 图像与右侧信息容器 */
	.station-content {
		display: flex;
		align-items: flex-start;
	}

	.station-icon {
		width: 120px;
		height: 90px;
		margin-right: 15px;
		border-radius: 8px;
	}

	/* 右侧信息区域 */
	.station-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.business-hours {
		font-size: 13px;
		color: #666;
	}

	.price {
		font-size: 16px;
		color: #ff3b30;
		font-weight: bold;
	}

	.station-address {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #666;
	}

	.address-text {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.address-icon {
		width: 12px;
		height: 12px;
		flex-shrink: 0;
		margin-left: 5px;
		/* 确保图标在地址末尾5px处 */
	}

	.divider {
		height: 1px;
		background: #f0f0f0;
		margin-top: 15px;
	}

	/* 地图模式样式 */
	.map-mode-container {
		position: relative;
		width: 100%;
		height: 400px;
		z-index: 1;
	}

	.map {
		width: 100%;
		height: 100%;
	}
	
	/* 底部弹窗 */
	.popup-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 9999;
		/* 提高层级确保不被其他元素遮挡 */
		overflow: hidden;
		/* 添加过渡动画便于观察弹窗是否出现 */
		opacity: 0;
		animation: fadeIn 0.3s forwards;
	}

	/* 弹窗内容 - 确保从底部滑入 */
	.popup-content {
		width: 100%;
		background: #fff;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		padding: 20px;
		max-height: 70vh;
		overflow-y: auto;
		transform: translateY(100%);
		animation: slideUp 0.3s forwards;
		animation-delay: 0.1s;
	}

	/* 动画效果 */
	@keyframes fadeIn {
		to {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		to {
			transform: translateY(0);
		}
	}

	/* 确保地图不会覆盖弹窗 */
	.map-mode-container {
		position: relative;
		width: 100%;
		height: 400px;
		z-index: 1;
		/* 低于弹窗的z-index */
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.popup-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.popup-close {
		width: 24px;
		height: 24px;
	}

	.popup-address {
		font-size: 14px;
		color: #666;
		margin-bottom: 15px;
	}

	.popup-discounts {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 15px;
	}

	.popup-discount-tag {
		background: #fff2f2;
		color: #ff3b30;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 12px;
		margin-right: 8px;
		margin-bottom: 5px;
	}

	.popup-price {
		font-size: 18px;
		color: #ff3b30;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.popup-hours {
		font-size: 14px;
		color: #666;
		margin-bottom: 20px;
	}

	.popup-action-buttons {
		display: flex;
		justify-content: center;
	}

	.popup-nav-button {
		background: linear-gradient(90deg, #FF9B2D, #FF7A45);
		color: #fff;
		padding: 15px 60px;
		border-radius: 30px;
		font-size: 16px;
		font-weight: bold;
	}
</style>